<script setup>
import {ref} from "vue";
import axios from "axios";

const inputFile = ref()
const pictureInfo = ref({})
const imageUrl = ref('')
const submit = () => {
  axios.post('/server/picture/save', pictureInfo.value).then((res) => {
    alert(res.data.msg)
  })
}
const save = () => {
  console.log(inputFile.value.files[0])
  const formData = new FormData()
  formData.append('file', inputFile.value.files[0])
  axios.post('/server/picture/upload', formData)
      .then(res => {
        console.log(res.data)
        pictureInfo.value.url = res.data.data[1]
        pictureInfo.value.originTitle = res.data.data[0]
        imageUrl.value = `http://localhost:8080/picture/getImage?url=${pictureInfo.value.url}`
      })
}
</script>

<template>
  <div>
    <div>
      <label>标题：</label>
      <el-input type="text" v-model="pictureInfo.title"></el-input>
    </div>
    <el-input ref="inputFile"
              size="small"
              style="margin-top: 5%"
              type="file"
              accept="image/png, image/jpg"
              @change="save"></el-input>
  </div>
  <div style="width:40%;
    margin-left:2%;
    display: flex;
    justify-content: space-between;
     align-items: center">
    <div>
      <el-button @click="submit">提交</el-button>
    </div>
    <div style="width: 70%">
      <el-image style="width: 50%; height: 50%;" :src="imageUrl"></el-image>
    </div>
  </div>
</template>

<style scoped>

</style>